<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* div{
            color: purple;
        }
        a{
            color: red;
        }
        span{
            color: brown;
        } */
        /* 标签选择器 */

        /* #div1{
            color: red;
        } */
        /* id选择器 */

        /* .font40{
            font-size: 50px;
            所有class为.font40的字体大小设置为40
        } */
        /* class(类)选择器 */

        /* *{
            color: purple;
        } */
        /* 通配符选择器 */

        /* #div1,#div2{
            color: red;  ,表示取并集 
        } */
        /* 复合选择器 */

        /* li{
            color: red;
        } */

        /* ul{
            color: red; 列外也会生效，影响范围太大
        } */

        /* ul li{
            color: red;
        } */
         /* 第二张复合选择器，表示子标签的复合 */

         /* a{
            color: red;
         } */

         /* ul li a{
            color: red;
         }
         每复合一个空格隔开 */

         /* ul li.second{
            color: blue;
         } */
          
        /* css样式 */
        #div1{
            display: inline;
            /* display标签将块级元素变行内元素 */
            
            width: 500px;
            height: 200px;
            /* 设置的div块级区域的宽高 */

            /* border-width: 1px; */
            border-width: 1px 5px 10px 5px;
            /* 上左下右顺时针 top left bottom right*/

            /* border-top-width: 1px;
            border-left-width: 5px;
            border-bottom-width: 10px;
            border-right-width: 5px; */

            border-style: dashed;
            /* 虚线 */

            border-color: black;
            /* border: 1px solid red; */
            /* 使用border时这三个参数无先后顺序 */
        }

        #span1{
            display: block;
            width: 500px;
            height: 200px;
            border: 1px solid red;
            /* 运行发现宽高对span标签不生效
            宽高只对块级元素生效
            而对于行内元素要生效需要通过display标签转换 */

        }

    </style>
</head>
<body>
    <div id="div1" class="font40">我是一个div1</div>
    <!-- 从技术上讲，id 属性的值可以包含除了空白字符的任何字符。
    然而，为了避免无意中的错误，只能使用 ASCII 字母、数字、'_' 和 '-'，
    并且id 属性的值应该以字母开头。例如，
    . 在 CSS 中具有特殊的意义（它作为一个类选择器）。
    除非你注意在 CSS 中转义它，否则它不会被识别为 id 属性值的一部分。
    很容易忘记这样做，导致你的代码中出现难以检测的错误。 -->
    <div id="div2" class="font40">我是一个div2</div>
    <div id="div3" ><a href="#">我是一个div3</a></div>
    <span id="span1" class="font40">我是span</span>

    <ul> unorder list <br/>
        无序列表标签<br/>
        <li><a href="#">第一个</a> </li>
        <li class="second">第二个</li>
        <li>第三个</li>
        <li>第四个</li>
    </ul> 

    <ol> order list <br/>
        有序列表标签
        <li>有序第一个</li>
        <li>有序第二个</li>
        <li>有序第三个</li>
        <li>有序第四个</li>

    </ol>
    <p>
        总结 子标签逐空格选择<br/>
             class通过"."访问<br/>
             id通过#id访问
    </p>
</body>
</html>